<#ftl output_format="HTML" >
<#import "/layout.ftl" as layout>
<@layout.masterTemplate navIndex=9 >
<div class="card mt-4 mb-4" >
    <div class="card-body">
      <button id="upload" type="button" class="btn btn-primary">上传</button>
      <button id="rename" type="button" class="btn btn-info disabled">改名</button>
      <button id="download" type="button" class="btn btn-info disabled">下载</button>
      <button id="unlink" type="button" class="btn btn-warning disabled">删除</button>
    </div>
</div>
<#include "browser-common.ftl" />
<iframe id="dframe" src="" style="width:0px;height:0px;border:none;visibility:hidden;"></iframe>
<div id="uploadDlg" class="card as-popup-box" style="visibility: hidden">
    <div class="card-header" >上传文件<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button></div>
    <div class="card-body">
        <iframe id="uploadCallback" name="uploadCallback"src="about:blank" frameborder="0" style="height:0px" ></iframe>
        <form method="POST" action="<@spring.url '/file-browser/uploader2?dir=' />${dir}" target="uploadCallback" enctype="multipart/form-data" >
            <div class="form-group">
                <input type="file" name="upload" />
                <p class="help-block">上传文件至当前目录下。</p>
            </div>
            <button class="btn btn-primary">确认</button>
        </form>
    </div>
</div>
<script>
'use strict';
$(window).resize(evt => windowResized());
window.callbacks = {
    upload: function(path) {
        console.log('Callback of uploaded:', path);
        reloadPage();
    },
    rename: function(oldFile, newFile) {
        console.log('Callback of remove:', oldFile.path, 'to', newFile.path);
        reloadPage();
    },
    unlink: function(file) {
        console.log('Callback of deleted:', file.path);
        reloadPage();
    }
};
$(document).ready(evt => {
    windowResized();

    let uploadBtn = $('#upload');
    let renameBtn = $('#rename');
    let downloadBtn = $('#download');
    let unlinkBtn = $('#unlink');

    uploadBtn.click(evt => {
        let uploadDlg = $('#uploadDlg');
        $('.close', uploadDlg).click(evt => {
            $('form', uploadDlg).reset();
            uploadDlg.hide();
            hideOverlay();
        });
        uploadDlg.css({top: window.innerHeight * .05, left: (window.innerWidth - uploadDlg.clientWidth) / 2 });
        showOverlay();
        uploadDlg.show();
    });

    renameBtn.click(evt => {
        if (selectedFile) {
            let newFileName = prompt('输入新文件名', getFileBaseName(selectedFile));
            if (newFileName) {
                rpcPost({url: '<@spring.url "/file-browser/rename?path=" />' + selectedFile,
                data: {newFileName: newFileName}
                })
                .then(data => {
                    if (!data.oldFile) {
                        console.error('Old file not exists');
                        return;
                    }
                    if (!data.newFile) {
                        console.error('Cannot rename: ', data.oldFile.path);
                        return;
                    }

                    callbacks.rename(data.oldFile, data.newFile);
                });
            }
        }
    });

    downloadBtn.click(evt => {
        if (selectedFile) {
            let dframe = $('#dframe');
            dframe.src = '<@spring.url "/file-browser/download?path=" />' + selectedFile;
        }
    });

    unlinkBtn.click(evt => {
        if (selectedFile) {
            rpcPost({url: '<@spring.url "/file-browser/unlink?path=" />' + selectedFile})
            .then(data => {
                if (!data.file) {
                    console.error('File not exists');
                    return;
                }

                callbacks.unlink(data.file);
            });
        }
    });
});
let windowResized = function() {
    let wh = window.innerHeight;
    $(browser).height(Math.floor(wh * 2 / 3));
    onBrowserSizeChanged(browser.width(), browser.height());
};
let getFileBaseName = function(path) {
    let p1 = path.lastIndexOf('.');
    let p2 = path.lastIndexOf('/');
    if (p1 > p2) {
        return path.substring(p2 + 1, p1);
    } else {
        return '';
    }
};
let selectedFile = '';
let selectedFileChanged = function(fn) {
     let uploadBtn = $('#upload');
     let renameBtn = $('#rename');
     let downloadBtn = $('#download');
     let unlinkBtn = $('#unlink');
    selectedFile = fn;
    if (selectedFile) {
        renameBtn.removeClass('disabled');
        downloadBtn.removeClass('disabled');
        unlinkBtn.removeClass('disabled');
    } else {
        renameBtn.addClass('disabled');
        downloadBtn.addClass('disabled');
        unlinkBtn.addClass('disabled');
    }
}
</script>
</@layout.masterTemplate>
